<template>
  <div class="paramterPage">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-bank-card"> 操作日志</i>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box">
      <div class="type">用户账号 :</div>
      <template>
        <el-form :inline="true" :model="query" ref="logsFormRef" class="">
          <el-select 
            v-model="optionsValue"    
            filterable
            allow-create
            default-first-option
            placeholder="请选择用户账号">
            <el-option
             v-for="item in logslist" 
             :key="item.id"
             :label="item.username"
             :value="item.username"
            >
            </el-option>
          </el-select> 
          <el-button type="primary" style="margin-left:10px" @click="onFindAccount">搜索</el-button><!--主要按钮-->
          <el-button type="success" @click="onBlank">重置</el-button>
        </el-form>
      </template>
      </div>
    <!--接口返回列表-->
    <el-table :data="logslist" border>
      <el-table-column prop="id" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="username" label="用户账号" align="center"></el-table-column>
      <el-table-column prop="requestIp" label="请求IP" align="center"></el-table-column>
      <el-table-column prop="requestMethod" label="请求方法" align="center"></el-table-column>
      <el-table-column prop="requestUrl" label="请求URL" align="center"></el-table-column>
      <!--
      <el-table-column prop="addTime" label="添加时间" align="center"></el-table-column>
      -->
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope"> <!--  slot-scope="scope" 这里取到当前单元格  -->
          <el-button
            type="text"
            icon="el-icon-edit"
            class="btn-sz"
            @click="detailLogs(scope.$index, scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
      </el-table>
    <!--分页-->
    <div class="pagination">
       <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pagenum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pagesize"
          :total="pageTotal"
          @current-change="handlePageChange"
      ></el-pagination> 
    </div>  
      <!-- 对话框区域 -->  
     <el-dialog width="500px" @close="blankAccount" :visible.sync="dialogFormVisible">
       <el-form :model="detaiData" status-icon  :rules="accountRule" ref="accountForm"   label-position="left" label-width="100px"  style='width: 460px; margin-left:20px; height:450px;'>
        <el-form-item prop="username"  label="用户账号"  >
          <el-button v-if="detaiData.username!=null" class="button_Width" >{{detaiData.username}}</el-button>
        </el-form-item>
        <el-form-item prop="runtime"  label="运行时间 (ms)" >
          <el-button v-if="detaiData.runtime!=null" class="button_Width" >{{detaiData.runtime}}</el-button>
        </el-form-item>
        <el-form-item prop="requestArgs" label="请求参数" >
          <el-button v-if="detaiData.requestArgs!='[]'" class="button_Width" >{{detaiData.requestArgs}}</el-button>
        </el-form-item>
        <el-form-item prop="requestMethod" label="请求方法" >
          <el-tooltip placement="right">
            <div slot="content">{{detaiData.requestMethod}}</div>
            <el-button v-if="detaiData.requestMethod!=null" class="button_Width" >{{detaiData.requestMethod | lengthFormat}}</el-button>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="requestIp" label="请求IP" >
          <el-button v-if="detaiData.requestIp!=null" class="button_Width" >{{detaiData.requestIp}}</el-button>
        </el-form-item>
        <el-form-item prop="requestUrl" label="请求URL" >
          <el-tooltip placement="right">
            <div slot="content">{{detaiData.requestUrl}}</div>
            <el-button v-if="detaiData.requestUrl!=null" class="button_Width">{{detaiData.requestUrl | lengthFormat}}</el-button>
          </el-tooltip>
        </el-form-item>
           <el-form-item prop="responseValue" label="返回参数" >
          <el-tooltip placement="right">
            <div slot="content">{{detaiData.responseValue}}</div>
            <el-button v-if="detaiData.responseValue!=null" class="button_Width" >{{detaiData.responseValue | lengthFormat}} </el-button>
          </el-tooltip>
        </el-form-item>
         <el-form-item prop="addTime" label="添加时间" >       
            <el-button v-if="detaiData.addTime!=null" class="button_Width" >{{detaiData.addTime}}</el-button>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="blankAccount">取 消</el-button>
      </div>
     </el-dialog>
  </div>
</template> 

<script>
import { commonGetLogsList, commongetDetailLogs } from '../../../service/common.js'
import '../../../utils/filter'
export default {
  data() {
    return {
    // 分页数据
      query: {
        username:"",
        pagenum: 1,
        pagesize: 10,
      },
      pageTotal: 0,//总页数初始值
      //获取接口数据
      detaiData:{
        username:"",
        runtime:"",
        requestArgs:"",
        requestIp:"",
        requestMethod:"",
        requestUrl:"",
        responseValue:"",
        addTime:""
      },
      dialogFormVisible:false, //对话框开关
      // 查询数据//
      //formInline:"",
      optionsValue: "",//搜索框值，
      logslist:[],//表格数据
    };
  },
  created() {
    //获取日志类表
    this.getlogsList()
  },
  methods: {
    //分页
    handleSizeChange() {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange() {
         console.log(`当前页: ${val}`);
    },
      //获取日志类表
    async getlogsList() {
      const res = await commonGetLogsList(this.query)
      console.log('res: 获取日志列表', res);
      if (res.code == '200') {
       this.logslist = res.pageInfo.records
       this.pageTotal = res.pageInfo.total
      }
    },  
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pagenum', val);
      console.log('分页导航参数',this.query)
      this.getlogsList()
    },
    // 详情按钮
    async detailLogs(index,row) {
      console.log('row',row,'index',index)
      try {
        const res = await commongetDetailLogs({id:row.id})
        console.log('res:根据id返回日志详情', res);//res.pageInfo
        this.$set(this.detaiData,'username',row.username)
        this.$set(this.detaiData,'runtime',row.runtime)
        this.$set(this.detaiData,'requestArgs',row.requestArgs)
        this.$set(this.detaiData,'requestMethod',row.requestMethod)
        this.$set(this.detaiData,'requestIp',row.requestIp)
        this.$set(this.detaiData,'requestUrl',row.requestUrl)    
        this.$set(this.detaiData,'responseValue',row.responseValue)
        this.$set(this.detaiData,'addTime',row.addTime)
        this.$set(this.detaiData,'id',row.id)
        this.dialogFormVisible = true//打开对话框
      } catch (error) {
        console.log(error,'异常操作error')
        this.$message.error('异常操作')
      }
    },
    // 点击取消详情弹窗 
    blankAccount() {
      this.dialogFormVisible = false
    },  
    // 搜索
    async onFindAccount() {//根据用户名称搜索
      this.query.username = this.optionsValue//选择下拉框的值
      console.log('搜索请求',this.query)
      try {
        const res = await commonGetLogsList(this.query)
        if (res.code == '200') {
         console.log('res: 搜索接口返回日志列表',res),
         this.logslist = res.pageInfo.records,// 表格数据
         this.pageTotal = res.pageInfo.total//总共的页数
        }
      } catch (error) {
         this.$message.success(error)//Message 消息提示
      }
    },
    //重置
    onBlank() {
     this.optionsValue=""
     this.query.username="",
     this.query.pagenum=1,
     this.query.pagesize=10
     this.getlogsList()
    },
  },
};
</script>
<style lang="less" scoped>
.paramterPage {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  padding-top: 15px;
  padding-left: 20px;
  background-color: #fff;
  .button_Width{
    width: 330px;
    text-align: left;
  }
  .handle-box {
    display: flex;
    align-items: center;
    margin: 18px 0;
    .type {
      font-size: 14px;
      margin-right: 20px;
    }
  }
   .pagination {
   margin-top: 10px;
   text-align: right;
 }
}
</style>